<template>
    <div>
        <el-card style="height: calc(100vh - 60px) ;background-color: #e8e7e7;width: 80%;margin-left: 10%">
            <div v-for="(items, index) in list" :key="index">
                <el-row style="margin-left: 65%; "  v-if="items.id == myid">
                    <el-col :span="1" style="width: 8px;height: 8px;background-color:cornflowerblue;">
                        <!-- <img :src="items.pic" style="width: 8px;height: 8px;"> -->
                    </el-col>
                    <el-col :span="23"><el-card style="margin-right: 0; ">{{ items.content }}</el-card></el-col>
                </el-row>
                <el-row  style="margin-right:65%" v-else>
                    <el-col :span="1" style="width: 8px;height: 8px;background-color:coral;">
                        <!-- <img :src="items.pic" style="width: 8px;height: 8px;"> -->
                    </el-col>
                    <el-col :span="23"><el-card style="margin-left: 0;">{{ items.content }}</el-card></el-col>
                </el-row>
            </div>
        </el-card>
        <el-card shadow="never" style="width: 80%;margin-left: 10%;height: 60px;background-color: rgb(255,255,255)">
            <el-input style="width: 90%;margin-right: 10px" v-model="message"></el-input><el-button type="primary"
                @click="sendMessage">发送</el-button>

        </el-card>
    </div>
</template>
    
<script>
export default {
    data() {
        return {
            message: undefined,
            myid: JSON.parse(sessionStorage.getItem("loginForm")).id,
            list: [],
            websock: null,
        }
    },
    created() {
        this.initwebsocket()
    },
    methods: {
        initwebsocket() {
            let username = JSON.parse(sessionStorage.getItem("loginForm")).id;
            let url = "ws://localhost:8082/websocket/" + username;
            console.log(url)

            this.websock = new WebSocket(url);
            this.websock.onopen = this.websocketonopen
            this.websock.onmessage = this.websocketonmessage
        },
        //连接成功
        websocketonopen() {
            console.log('WebSocket连接成1功')

        },
        //接收消息
        websocketonmessage(e) {
            let dataJson = JSON.parse(e.data)
            let list1 = {
                id: 'we',
                content: dataJson.message+"（用户）",
                pic: dataJson.pic
            }
            console.log("接收" + list1.content)
            this.list.push(list1)
        },
        //  发消息
        sendMessage() {
            let message1 = {
                to: 2,
                from: JSON.parse(sessionStorage.getItem("loginForm")).id,
                message: this.message,
                pic: JSON.parse(sessionStorage.getItem("loginForm")).picture
            }
            let user = {
                id: JSON.parse(sessionStorage.getItem("loginForm")).id,
                content: this.message+"（管理员）",
                pic: JSON.parse(sessionStorage.getItem("loginForm")).picture
            }
            this.list.push(user)
            this.websock.send(JSON.stringify(message1))
            this.message = null
        },
    }
}
</script>
    
<style scoped>

>>>.el-card__body {
    padding: 10px !important;
    /* color:red; */
}
</style>